<template>
	<div class="home-container">
		<!-- 顶部欢迎区域和统计面板 -->
		<div class="home-welcome-section">
			<div class="welcome-header">
				<div class="welcome-content">
					<div class="welcome-greeting">
						<h2 class="welcome-title">
							<el-icon class="welcome-icon">
								<Sunny />
							</el-icon>
							<span class="greeting-time">{{ formatAxis(new Date()) }}</span>
							欢迎回来，{{ currentUser }}
						</h2>
						<p class="welcome-subtitle">{{ dailyGreeting }}</p>
					</div>
					<div class="welcome-date">
						<div class="current-time">{{ currentTime }}</div>
						<div class="current-date">{{ currentDate }}</div>
					</div>
				</div>
			</div>
			<StatsPanel :stats="statsData" :loading="statsLoading" />
		</div>

		<!-- 功能区网格 -->
		<div class="home-grid">
			<!-- 常用功能 -->
			<div class="home-grid-item">
				<div class="home-card shortcuts-card">
					<div class="home-section-title">
						<div class="title-content">
							<el-icon class="title-icon title-icon-warning">
								<Star />
							</el-icon>
							常用功能
						</div>
						<div class="title-extra">
							<el-button-group>
								<el-button v-auth="'/api/SysUserFavorite/Add'" type="primary" size="small" @click="openMenuSelector" title="从菜单选择">
									<el-icon>
										<Grid />
									</el-icon>
									选择菜单
								</el-button>
							</el-button-group>
						</div>
					</div>
					<div class="home-section-content scrollable">
						<ShortcutManager ref="shortcutManagerRef" @menu-selector-visible="handleMenuSelectorVisible" />
					</div>
				</div>
			</div>

			<!-- 统一信息中心 -->
			<div class="home-grid-item">
				<div class="home-card unified-board-card">
					<div class="home-section-content no-padding scrollable">
						<UnifiedBoard :default-tab="'announcement'" @tab-change="handleTabChange" @total-count="handleTotalBoardCount" />
					</div>
				</div>
			</div>
		</div>
		<!-- 人事数据 -->
		<div class="home-grid-item" v-role="'201'">
			<div class="home-card personnel-card">
				<div class="home-section-title">
					<div class="title-content">
						<el-icon class="title-icon title-icon-success">
							<User />
						</el-icon>
						员工数据概览
					</div>
					<div class="title-extra"></div>
				</div>
				<div class="home-section-content">
					<PersonnelData />
				</div>
			</div>
		</div>
		<!-- 菜单选择器 -->
		<MenuSelector v-model="menuSelectorVisible" :menu-list="routesList" :existing-shortcuts="shortcuts" @add-shortcut="handleAddFromMenuSelector" />
	</div>
</template>

<script setup lang="ts" name="home">
import { ref, onMounted, onUnmounted, defineAsyncComponent, computed } from 'vue';
import { Star, Grid, Bell, User, Help, Sunny, Briefcase } from '@element-plus/icons-vue';
import { useRoutesList } from '/@/stores/routesList';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
import StatsPanel from './components/StatsPanel.vue';
import ShortcutManager from './components/ShortcutManager.vue';
import PersonnelData from './components/PersonnelData.vue';
import UnifiedBoard from './components/UnifiedBoard.vue';
import { useShortcutsStore } from '/@/stores/shortcuts';
import { SysTodoCenterApi as api } from '/@/views/_admin/systodocenter/api';
import { formatAxis } from '/@/utils/formatTime';
import { useDailyGreeting } from '/@/hooks/useDailyGreeting';

// 引入菜单选择器组件
const MenuSelector = defineAsyncComponent(() => import('/@/components/menuSelector/index.vue'));

// ======= 统计数据配置 =======
interface StatsItem {
	title: string;
	value: string;
	icon: string;
	type?: string;
	status?: string;
}

// 默认统计数据配置
const DEFAULT_STATS_CONFIG = [
	{ title: '未读待办', key: 'Pending', icon: 'Bell', status: '待办' },
	{ title: '我的已办', key: 'Completed', icon: 'CircleCheck', status: '已办' },
	{ title: '转办事项', key: 'Collaborated', icon: 'Clock', status: '已协同' },
	{ title: '我发起的', key: 'Initiated', icon: 'Promotion', status: '我的提交' },
] as const;

// ======= 统计数据 =======
const statsData = ref<StatsItem[]>([]);
const statsLoading = ref(true);

// ======= 常用功能相关 =======
const menuSelectorVisible = ref(false);
const shortcutManagerRef = ref();
const shortcutsStore = useShortcutsStore();
const { shortcuts } = storeToRefs(shortcutsStore);

// 获取路由信息
const routesListStore = useRoutesList();
const { routesList } = storeToRefs(routesListStore);

// 获取用户信息
const userInfoStore = useUserInfo();
const { userInfos } = storeToRefs(userInfoStore);

// 获取每日问候语
const { dailyGreeting } = useDailyGreeting();

const openMenuSelector = () => {
	menuSelectorVisible.value = true;
};

const handleMenuSelectorVisible = (visible: boolean) => {
	menuSelectorVisible.value = visible;
};

// 菜单项接口定义
interface MenuItem {
	id: string;
	name: string;
	icon: string;
	path: string;
}

// 从菜单选择器添加常用功能
const handleAddFromMenuSelector = async (menuItem: MenuItem) => {
	try {
		const apiData = {
			Entity: {
				MenuId: menuItem.id,
				MenuName: menuItem.name,
				MenuIcon: menuItem.icon,
				MenuUrl: menuItem.path,
				SortOrder: shortcuts.value.length + 1,
			},
		};

		await shortcutsStore.addShortcut(apiData);
		ElMessage.success('添加成功');
	} catch (error) {
		console.error('添加常用功能失败:', error);
		ElMessage.error('添加失败');
	}
};

// 加载shortcuts数据
const loadShortcuts = async () => {
	try {
		await shortcutsStore.loadShortcuts();
	} catch (error) {
		console.error('加载常用功能失败:', error);
		// 静默处理错误，不影响页面其他功能
	}
};

// ======= 欢迎区域相关 =======
const currentUser = computed(() => userInfos.value.userName || '用户');
const currentTime = ref('');
const currentDate = ref('');

// 更新时间
const updateTime = () => {
	const now = new Date();
	currentTime.value = now.toLocaleTimeString('zh-CN', {
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit',
	});
	currentDate.value = now.toLocaleDateString('zh-CN', {
		year: 'numeric',
		month: 'long',
		day: 'numeric',
		weekday: 'long',
	});
};

// 定时器
let timeInterval: NodeJS.Timeout | null = null;

// ======= 统一信息中心相关 =======
const totalBoardCount = ref(0);
const currentActiveTab = ref('announcement');

// 处理信息中心总数量
const handleTotalBoardCount = (count: number) => {
	totalBoardCount.value = count;
};

// 处理Tab切换
const handleTabChange = (tabKey: string) => {
	currentActiveTab.value = tabKey;
};

// 数据转换工具函数
const transformStatsData = (apiData: any): StatsItem[] => {
	return DEFAULT_STATS_CONFIG.map((config) => ({
		title: config.title,
		value: apiData[config.key]?.toString() || '0',
		icon: config.icon,
		type: config.key,
		status: config.status,
	}));
};

// 获取默认统计数据
const getDefaultStatsData = (): StatsItem[] => {
	return DEFAULT_STATS_CONFIG.map((config) => ({
		title: config.title,
		value: '0',
		icon: config.icon,
	}));
};

// 加载流程中心统计数据
const loadStatsData = async () => {
	try {
		statsLoading.value = true;
		const apiData = (await api().getStatistics({})) as any;

		statsData.value = transformStatsData(apiData);

		// 小延迟确保用户能看到loading效果
		await new Promise((resolve) => setTimeout(resolve, 300));
	} catch (error) {
		console.error('获取统计数据失败:', error);
		statsData.value = getDefaultStatsData();
	} finally {
		statsLoading.value = false;
	}
};

// ======= 组件生命周期 =======
onMounted(async () => {
	// 初始化时间显示
	updateTime();
	timeInterval = setInterval(updateTime, 1000);

	// 并行加载各模块数据
	await Promise.allSettled([loadStatsData(), loadShortcuts()]);
});

onUnmounted(() => {
	// 清理定时器
	if (timeInterval) {
		clearInterval(timeInterval);
	}
});
</script>

<style scoped>
/* =============== 首页重构样式 - 基于原型图优化 =============== */

/* 顶部欢迎区域 - 优化版 */
.home-welcome-section {
	margin-bottom: var(--home-module-gap-large);
}

.welcome-header {
	background: linear-gradient(135deg, var(--home-primary-lightest), var(--home-bg-primary), rgba(255, 255, 255, 0.9));
	border-radius: var(--home-radius-xl);
	margin-bottom: var(--home-module-gap);
	overflow: hidden;
	position: relative;
	box-shadow:
		0 12px 40px rgba(64, 158, 255, 0.12),
		0 4px 12px rgba(64, 158, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.welcome-header:hover {
	transform: translateY(-2px);
	box-shadow:
		0 16px 48px rgba(64, 158, 255, 0.18),
		0 8px 16px rgba(64, 158, 255, 0.12);
}

.welcome-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--home-primary),
		var(--home-primary-light),
		var(--home-success),
		var(--home-primary-light),
		var(--home-primary)
	);
	background-size: 200% 100%;
	animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.welcome-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--home-spacing-xxl);
	gap: var(--home-spacing-xl);
	position: relative;
}

.welcome-content::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 25%;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle at center, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.06) 40%, transparent 70%);
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	animation: pulseGlow 4s ease-in-out infinite;
	filter: blur(3px);
}

.welcome-content::before {
	content: '';
	position: absolute;
	top: 20%;
	right: 10%;
	width: 60px;
	height: 60px;
	background: radial-gradient(circle at center, rgba(255, 193, 7, 0.08) 0%, rgba(255, 193, 7, 0.04) 50%, transparent 80%);
	border-radius: 50%;
	animation: float 6s ease-in-out infinite;
	filter: blur(2px);
	pointer-events: none;
}

@keyframes pulseGlow {
	0%,
	100% {
		opacity: 0.3;
		transform: translateY(-50%) scale(1);
	}
	50% {
		opacity: 0.6;
		transform: translateY(-50%) scale(1.2);
	}
}

.welcome-greeting {
	flex: 1;
	z-index: 1;
	position: relative;
}

.welcome-title {
	display: flex;
	align-items: center;
	gap: var(--home-spacing-md);
	font-size: 26px;
	font-weight: 700;
	color: var(--home-text-primary);
	margin: 0 0 var(--home-spacing-sm) 0;
	letter-spacing: 0.3px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	line-height: 1.2;
	animation: fadeInLeft 0.8s ease-out;
}

.welcome-title .greeting-time {
	background: linear-gradient(135deg, var(--home-primary), var(--home-success));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 800;
	position: relative;
}

.welcome-icon {
	font-size: 32px;
	color: var(--home-primary);
	filter: drop-shadow(0 2px 4px rgba(64, 158, 255, 0.2));
	animation: iconBounce 3s ease-in-out infinite;
}

@keyframes iconBounce {
	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}
	25% {
		transform: translateY(-2px) rotate(5deg);
	}
	75% {
		transform: translateY(2px) rotate(-5deg);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sparkle {
	0%,
	100% {
		opacity: 0.6;
		transform: translateY(-50%) scale(1);
	}
	50% {
		opacity: 1;
		transform: translateY(-50%) scale(1.2);
	}
}

@keyframes slideIn {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
		opacity: 0.6;
	}
	50% {
		transform: translateY(-10px);
		opacity: 1;
	}
}

.welcome-subtitle {
	font-size: 15px;
	color: var(--home-text-secondary);
	margin: 0;
	line-height: 1.6;
	font-weight: 500;
	opacity: 0.9;
	position: relative;
	padding-left: var(--home-spacing-lg);
	animation: fadeInUp 1.2s ease-out 0.8s both;
	transform: translateY(10px);
}

.welcome-subtitle::before {
	content: '✨';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	animation: sparkle 3s ease-in-out infinite;
}

.welcome-subtitle::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: var(--home-spacing-lg);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, var(--home-primary), transparent);
	border-radius: 1px;
	animation: slideIn 1s ease-out 1.2s both;
	transform: scaleX(0);
	transform-origin: left;
}

.welcome-date {
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: var(--home-spacing-xs);
	z-index: 1;
	position: relative;
}

.current-time {
	font-size: 36px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--home-primary), var(--home-primary-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-family: 'SF Pro Display', 'Helvetica Neue', 'Arial', sans-serif;
	letter-spacing: -1.5px;
	text-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
	position: relative;
	line-height: 1;
	animation: timeGlow 2s ease-in-out infinite alternate;
}

@keyframes timeGlow {
	0% {
		filter: brightness(1) drop-shadow(0 0 5px rgba(64, 158, 255, 0.2));
	}
	100% {
		filter: brightness(1.1) drop-shadow(0 0 8px rgba(64, 158, 255, 0.3));
	}
}

.current-date {
	font-size: 14px;
	color: var(--home-text-secondary);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	opacity: 0.8;
	position: relative;
	animation: fadeInRight 1s ease-out 0.3s both;
	transform: translateX(10px);
}

.current-date::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--home-primary-light), transparent);
	opacity: 0.5;
}

/* 功能区网格布局 */
.home-grid {
	display: grid;
	gap: var(--home-module-gap-large);
	align-items: start;
}

.home-grid-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 确保卡片在网格中填充整个高度 */
.home-grid-item .home-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* 卡片特殊样式 */
.shortcuts-card {
	min-height: 400px;
}

.unified-board-card {
	min-height: 400px;
}

.personnel-card {
	min-height: 500px;
}

.notifications-card {
	min-height: 350px;
}

.recruitment-card {
	min-height: 320px;
}

.help-card {
	min-height: 280px;
}

/* 标题区域增强 */
.title-extra {
	display: flex;
	align-items: center;
	gap: var(--home-spacing-md);
	font-size: 13px;
	color: var(--home-text-secondary);
}

.count-badge {
	background: var(--home-primary-lightest);
	color: var(--home-primary);
	padding: 2px 8px;
	border-radius: var(--home-radius-round);
	font-size: 12px;
	font-weight: 600;
	min-width: 20px;
	text-align: center;
}

/* 内容区域滚动优化 */
.home-section-content.scrollable {
	overflow: auto;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: var(--home-border-light) transparent;
}

/* 无内边距的内容区域 */
.home-section-content.no-padding {
	padding: 0;
	margin: 0;
}

.shortcuts-card .home-section-content.scrollable {
	max-height: 320px;
}

.unified-board-card .home-section-content {
	max-height: 360px;
	overflow: hidden;
}

.notifications-card .home-section-content.scrollable {
	max-height: 280px;
}

.recruitment-card .home-section-content.scrollable {
	max-height: 250px;
}

.help-card .home-section-content.scrollable {
	max-height: 200px;
}

/* 自定义滚动条样式 */
.home-section-content.scrollable::-webkit-scrollbar {
	width: 6px;
}

.home-section-content.scrollable::-webkit-scrollbar-track {
	background: transparent;
}

.home-section-content.scrollable::-webkit-scrollbar-thumb {
	background: var(--home-border-light);
	border-radius: 3px;
}

.home-section-content.scrollable::-webkit-scrollbar-thumb:hover {
	background: var(--home-border-base);
}

/* 标题相关样式 */
.home-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--home-spacing-md);
	padding-bottom: var(--home-spacing-sm);
	border-bottom: 1px solid var(--home-border-extra-light);
	flex-shrink: 0; /* 防止标题被压缩 */
}

.title-content {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--home-text-primary);
}

.title-icon {
	width: 20px;
	height: 20px;
	border-radius: var(--home-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--home-spacing-sm);
	font-size: 12px;
}

.title-icon-warning {
	background: var(--home-warning-lightest);
	color: var(--home-warning);
}

.title-icon-info {
	background: var(--home-info-lightest);
	color: var(--home-info);
}

.title-icon-success {
	background: rgba(64, 158, 255, 0.1);
	color: #409eff;
}

.title-extra {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--home-text-secondary);
}

.title-extra :deep(.el-button-group) {
	.el-button {
		font-size: 12px;
		padding: 6px 12px;

		.el-icon {
			margin-right: 4px;
		}
	}
}

/* =============== 响应式设计 - 基于新布局优化 =============== */

/* 超大屏幕适配 */
@media (min-width: 1920px) {
	.welcome-content {
		padding: var(--home-spacing-xxl) calc(var(--home-spacing-xxl) * 1.5);
	}

	.welcome-title {
		font-size: 30px;
	}

	.welcome-icon {
		font-size: 36px;
	}

	.current-time {
		font-size: 42px;
	}

	.current-date {
		font-size: 16px;
	}

	.welcome-subtitle {
		font-size: 16px;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 450px;
		height: 500px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 550px;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 420px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 420px;
	}
}

/* 大屏幕适配 */
@media (min-width: 1400px) and (max-width: 1919px) {
	.welcome-title {
		font-size: 28px;
	}

	.welcome-icon {
		font-size: 34px;
	}

	.current-time {
		font-size: 38px;
	}

	.current-date {
		font-size: 15px;
	}
}

/* 中等大屏幕适配 */
@media (min-width: 1200px) and (max-width: 1399px) {
	.home-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--home-module-gap);
	}

	.welcome-title {
		font-size: 22px;
	}

	.current-time {
		font-size: 28px;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 380px;
		height: 450px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 480px;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 300px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
}

/* 中等屏幕适配 */
@media (min-width: 992px) and (max-width: 1199px) {
	.home-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--home-module-gap);
	}

	.welcome-content {
		flex-direction: column;
		text-align: center;
		gap: var(--home-spacing-lg);
	}

	.welcome-date {
		text-align: center;
	}

	.welcome-title {
		font-size: 20px;
		justify-content: center;
	}

	.current-time {
		font-size: 24px;
	}
}

/* 平板横屏适配 */
@media (min-width: 768px) and (max-width: 991px) {
	.home-grid {
		grid-template-columns: 1fr;
		gap: var(--home-module-gap-small);
	}

	.welcome-content {
		padding: var(--home-spacing-xl);
		flex-direction: column;
		text-align: center;
		gap: var(--home-spacing-lg);
	}

	.welcome-date {
		text-align: center;
	}

	.welcome-title {
		font-size: 20px;
		justify-content: center;
	}

	.current-time {
		font-size: 24px;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 350px;
		height: 400px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 350px;
		height: 450px;
		display: flex;
		flex-direction: column;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 270px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 270px;
	}
}

/* 平板竖屏和手机适配 */
@media (max-width: 767px) {
	.home-grid {
		grid-template-columns: 1fr;
		gap: var(--home-module-gap-small);
	}

	.welcome-content {
		padding: var(--home-spacing-lg);
		flex-direction: column;
		text-align: center;
		gap: var(--home-spacing-lg);
	}

	.welcome-content::after {
		display: none; /* 移动端隐藏装饰光晕 */
	}

	.welcome-greeting {
		order: 1;
	}

	.welcome-date {
		order: 0;
		text-align: center;
		margin-bottom: var(--home-spacing-md);
	}

	.welcome-title {
		font-size: 20px;
		justify-content: center;
		text-align: center;
		flex-wrap: wrap;
	}

	.welcome-icon {
		font-size: 24px;
		animation: none; /* 移动端简化动画 */
	}

	.welcome-subtitle {
		font-size: 14px;
		text-align: center;
	}

	.current-time {
		font-size: 28px;
		animation: none; /* 移动端简化动画 */
	}

	.current-date {
		font-size: 13px;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 300px;
		height: 350px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 300px;
		height: 400px;
		display: flex;
		flex-direction: column;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 250px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 250px;
	}

	.title-extra :deep(.el-button) {
		font-size: 11px;
		padding: 4px 8px;
	}

	.title-extra :deep(.el-button span) {
		display: none;
	}
}

/* 手机屏幕适配 */
@media (max-width: 480px) {
	.welcome-content {
		padding: var(--home-spacing-md);
		gap: var(--home-spacing-sm);
	}

	.welcome-title {
		font-size: 16px;
	}

	.welcome-icon {
		font-size: 20px;
	}

	.welcome-subtitle {
		font-size: 12px;
	}

	.current-time {
		font-size: 18px;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 280px;
		height: 330px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 280px;
		height: 380px;
		display: flex;
		flex-direction: column;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 230px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 230px;
	}

	.count-badge {
		font-size: 11px;
		padding: 1px 6px;
	}
}

/* 小屏手机适配 */
@media (max-width: 375px) {
	.welcome-content {
		padding: var(--home-spacing-sm);
	}

	.welcome-title {
		font-size: 15px;
	}

	.welcome-icon {
		font-size: 18px;
	}

	.current-time {
		font-size: 16px;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 260px;
		height: 310px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 260px;
		height: 360px;
		display: flex;
		flex-direction: column;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 210px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 210px;
	}
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
	.welcome-content {
		padding: var(--home-spacing-sm);
		flex-direction: row;
		text-align: left;
	}

	.welcome-date {
		text-align: right;
	}

	.shortcuts-card,
	.unified-board-card {
		min-height: 350px;
		height: 400px;
		display: flex;
		flex-direction: column;
	}

	.personnel-card {
		min-height: 500px;
	}

	.shortcuts-card .home-section-content.scrollable {
		max-height: 320px;
	}

	.unified-board-card .home-section-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 320px;
	}
}
</style>
